import React, { forwardRef, useRef  , useImperativeHandle } from 'react';


const Imperative = forwardRef( (props,ref)=>{
    const inputEl = useRef(null);
    function Fn(){
        console.log('inputEl: ', inputEl,this);
        inputEl.current.focus()
    }
    useImperativeHandle(ref, ()=>{
        return {
            name:'阿张',
            Fn:()=>{ Fn() }
        }
        // 返回值是暴露给父组件的属性和函数方法
    }) //! [] 这里面还有第三个参数 可以用来监听 比如监听一个count , 当他在数组里面 他改变的时候 会可以给父组件返回最新的对象了 
    return(
        <div>
            <input type="text" 
            ref={inputEl}
            />
            子组件
        </div>
    )
} )

export default ()=>{
    const el = useRef(null);
    return(
        <div>
            <Imperative  ref={el} ></Imperative>
            父组件 <button
            onClick={e=>{ console.log(el);
            el.current.Fn()
            }}
            >打印子组件传来的东西</button>
        </div>
    )
}